<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<form action="" method="post" name="userMessage">
    <!--默认选项   checked=“checked”想默认谁就写到谁的后面-->
    <!--单标签   br hr img base input-->
    用户名：<input type="text"/> <br><!--这是一个单行文本框-->
    密　码：<input type="password" maxlength="6"/> <br> <!--maxlength   最多输入多少个字符--><!--这是一个密码文本框-->
    <!--单选框   如果是一组  我们可以通过相同的nema值来实现-->
    性别：
    <input type="radio" name="sex"/> 女
    <input type="radio" name="sex"/> 男<br><!--这是一个单选框-->
    爱　好：
    <input type="checkbox" name="hobby">足球
    <input type="checkbox" name="hobby">篮球
    <input type="checkbox" name="hobby">乒乓器
    <input type="checkbox" name="hobby">羽毛球<br><!--这是一个复选框-->
    搜　索：<input type="button" value="搜索"> <br> <!--普通按钮-->
    <input type="submit"><!--提交按钮-->
    <input type="reset"><br><!--重置按钮-->
    <input type="image" src="../../CSS/1.jpg"><br>   <!--图片按钮-->
    上传文件：<input type="file"><!--文件按钮-->
    <h3>lable标签的使用</h3>
    <label>输入账号：<input type="text"></label><br>
    <label>密　　码：<input type="password"></label>
    <h3>文本域</h3>
    留言板：<br>
    <textarea>请输入留言</textarea>
    <h3>下拉菜单</h3>
    籍贯：
    <select>
        <option>点击选择</option>
        <option>1</option>
        <option>1</option>
    </select>
</form>
<h3>H5新加的标签</h3>
<header>语义：定义页面的头部 页眉</header>
<nav>语义：定义导航栏</nav>
<footer>语义：定义页面底部 页脚</footer>
<article>语义：定义文章</article>
<section>语义：定义区域</section>
<aside>语义：定义其所在内容之外的内容 侧边</aside>
<input type="text" value="输入明星" list="star"/>
<datalist id="star">
    <option>刘德华</option>
    <option>刘若英</option>
    <option>刘谦</option>
    <option>刘晓庆</option>
</datalist>
<br><br><br>
<fieldset><!--打包-->
    <legend>用户登录</legend>
    用户名：<input type="text"><br><br>
    密　码：<input type="password" maxlength="6"/> <br>
</fieldset>
<br><br>
<fieldset>
    <legend>H5新增标签</legend>
    <from action=" ">
        邮箱：<input type="email"><!--邮箱--><br><br>
        手机：<input type="tel"><!--手机--><br><br>
        url：<input type="url"><!--url--><br><br>
        数字：<input type="number"><!--数字--><br><br>
        搜索：<input type="search"><!--搜索--><br><br>
        自由拖动滑块：<input type="range"><!--自由拖动滑块--><br><br>
        小时分钟：<input type="time"><!--小时分钟--><br><br>
        年月日：<input type="date"><!--年月日--><br><br>
        时间：<input type="datetime"><!--时间--><br><br>
        月年：<input type="month"><!--月年--><br><br>
        星期年：<input type="week"><!--星期年--><br><br>
        颜色：<input type="week"><!--颜色--><br><br>
        <input type="submit"><br><br><!--提交按钮-->
    </from>

    <fieldset>
        <!--占位符      点击输入后自动删除-->
        用户名：<input type="text" placeholder="请输入电话或者邮箱" autofocus><br><br>
        上传文件：<input type="file" multiple><!--上传多种文件-->
    </fieldset>
    <fieldset>
        <legend>自动记录</legend>
        <h4>自动记录</h4>
        注意：<br>
        1.autocompleta 首先必须要有提交按钮。<br>
        2.这个表单必须要有一个名字。<br>
        <form action="">
            身份ID：<input type="text" autocomplete="<!--on/off-->" name="userName">
            <input type="submit" value="提交"/><br>
        </form>
        昵称：<input type="text" required placeholder="必选项" accesskey="s"><!--required必选项--><!--accesskey="s"  快速定位光标-->
    </fieldset>
    <fieldset>
        <legend>多媒体</legend>
        <embed>
        添加视频链接
        <embed><br><br>
        <audio src="music.mp3" autoplay controls loop="2"></audio><br><br>
        <!--loop="2" 循环两次 autoplay 自动播放  controls 默认播放控件  -->
        <video src="32%20播放视频video.avi" autoplay controls></video>
    </fieldset>
</fieldset>
</body>
</html>